{% extends 'layout/base.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'app01/css/account.css' %}">
    <style>
        .error-msg {
            color: red;
        }

        span {
            color: red;
        }

        a {
            text-decoration: none;
        }
    </style>

{% endblock %}


{% block breadcrumb %}
    <ol class="breadcrumb float-sm-left">
        <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
        <li class="breadcrumb-item"><a href="{% url 'index' %}">{{ api_obj.api_sub_it.it_name }}</a></li>
        <li class="breadcrumb-item"><a href="{% url 'list_api' pk=api_obj.api_sub_it_id %}">{{ api_obj.api_name }}</a>
        </li>
        <li class="breadcrumb-item active">编辑用例</li>
    </ol>
{% endblock %}

{% block content %}

    <div class="my-md-4" style="width:1000px">
        <div class="card">
            <div class="card-body">
                <form id="addForm" action="" method="post" novalidate class="row g-3">
                    {% csrf_token %}
                    <div class="col-md-6">
                        <span>*</span>
                        <label for="{{ form.api_name.id_for_label }}"
                               class="form-label">{{ form.api_name.label }}</label>
                        {{ form.api_name }}
                        <span class="error-msg"></span>
                        <span style="color:#6c757d;">英文、下划线、数字组合（必须唯一）例如：neeo_001等</span>

                    </div>
                    <div class="col-md-6">
                        <span>*</span>
                        <label for="{{ form.api_title.id_for_label }}"
                               class="form-label">{{ form.api_title.label }}</label>
                        {{ form.api_title }}
                        <span class="error-msg"></span>
                    </div>

                    <div class="col-6">
                        <span>*</span>
                        <label for="{{ form.api_url.id_for_label }}" class="form-label">{{ form.api_url.label }}</label>
                        {{ form.api_url }}
                        <span class="error-msg"></span>
                    </div>

                    <div class="col-md-2">
                        <span>*</span>
                        <label for="{{ form.api_method.id_for_label }}"
                               class="form-label">{{ form.api_method.label }}</label>
                        <br/>
                        {{ form.api_method }}
                    </div>


                    <div class="col-lg-12">
                        <label for="{{ form.api_params.id_for_label }}"
                               class="form-label">{{ form.api_params.label }}</label>
                        {{ form.api_params }}
                        <span class="error-msg"></span>
                    </div>

                    <div class="col-lg-12">
                        <label for="{{ form.api_json.id_for_label }}"
                               class="form-label">{{ form.api_json.label }}</label>
                        {{ form.api_json }}
                        <span class="error-msg"></span>
                    </div>


                    <div class="col-lg-12">
                        <label for="{{ form.api_data.id_for_label }}"
                               class="form-label">{{ form.api_data.label }}</label>
                        {{ form.api_data }}
                        <span class="error-msg"></span>
                    </div>


                    <div class="col-lg-12">
                        <label for="{{ form.api_headers.id_for_label }}"
                               class="form-label">{{ form.api_headers.label }}</label>
                        {{ form.api_headers }}
                        <span style="color:#6c757d;">需要依赖前面请求header值,填入格式如：<br>{"testfan-token":"${neeo_001>response_json>data}$"}</span>
                        <span style="color:#6c757d;">   解释：本次接口用例请求头(header)中testfan-token字段的值从用例名neeo_001响应信息response_json的data字段值获取</span>
                        <span class="error-msg"></span>
                    </div>

                    <div class="col-6">
                        <label for="{{ form.api_cookies.id_for_label }}"
                               class="form-label">{{ form.api_cookies.label }}</label>
                        {{ form.api_cookies }}
                        <span style="color:#6c757d;">需要依赖前面请求返回cookies值,填入依赖用例名，例如：neeo_001</span>
                        <span class="error-msg"></span>
                    </div>

                    <div class="col-6">
                        <label for="{{ form.api_expect.id_for_label }}"
                               class="form-label">{{ form.api_expect.label }}</label>
                        {{ form.api_expect }}
                        <span class="error-msg"></span>
                    </div>

                    <div class="col-6">
                        <label for="{{ form.api_desc.id_for_label }}"
                               class="form-label">{{ form.api_desc.label }}</label>
                        {{ form.api_desc }}
                        <span class="error-msg"></span>
                    </div>
                </form>
                <br/>
                <input id="btnSubmit" type="submit" class="btn btn-success" value="提交">
            </div>

        </div>

    </div>

{% endblock %}

{% block js %}
    <script>
        $(function () {

            bindClickSubmit();
            bindClickClearErrorValues();
        });

        /*
        点击提交按钮后执行事件
         */
        function bindClickSubmit() {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: "",
                    type: "POST",
                    data: $("#addForm").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            location.href = res.data
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0])
                            })
                        }
                    }

                })
            })
        }

        /*
        鼠标点击input框后清除错误提示信息
        */

        function bindClickClearErrorValues() {
            $("input").focus(function () {
                $('.error-msg').empty();
            })
        }
    </script>
{% endblock %}



